<template>
    <div class="tourist_style">
        <div class="common_header">
            <div class="header-img"><img src="../assets/imgs/nav_bar_return@2x.png" alt="" @click="$router.go(-1)">
            </div>
            <div class="header-title">游客特征</div>
        </div>
        <div class="content">
            <div class="content_pian">
                <div class="content_title">客源地统计</div>
                <div id="tourist_statistics"></div>
            </div>
            <div class="content_pian">
                <div class="content_title">游客特征</div>
                <div id="sex_consume"></div>
                <div id="age_consume"></div>
                <div id="zi_jia_consume"></div>
                <div id="edu_consume"></div>
                <div id="phone_consume"></div>
            </div>
        </div>
    </div>
</template>

<script>
    import echarts from 'echarts';
    import {Notify} from 'vant';

    export default {
        name: "touristStyle",
        components: {
            [Notify.name]: Notify
        },
        data() {
            return {
                tr_id:''
            }
        },
        mounted() {
            this.tr_id = localStorage.getItem('tr_id');
            this.getALLData(['information','tripMode','phoneTypeCount']);
            this.setPhone();
        },
        methods: {
            getALLData(arg) {
                // this.$store.commit('showLoading');
                this.$http.get('auth/mac?tr_id=' + this.tr_id, {
                    params: {
                        "@action": arg.join(',')
                    }
                })
                    .then((result) => {
                        this.information(result.data.information);
                        this.setZiJia(result.data.tripMode);
                        this.setPhone(result.data.phoneTypeCount);
                        // this.$store.commit('hideLoading');
                    })

            },
            information(data) {
                for (let i = 0; i < Object.keys(data).length; i++) {
                    if (Object.keys(data)[i] == '性别') {
                        this.setSex(data.性别);
                    } else if (Object.keys(data)[i] == '年龄') {
                        this.setAge(data.年龄);
                    } else if (Object.keys(data)[i] == '地域') {
                        this.passengerOriginStatistics(data.地域);
                    } else if (Object.keys(data)[i] == '学历') {
                        this.setEducation(data.学历);
                    }
                }
            },
            passengerOriginStatistics(data) {
                let yAxisData = [], seriesData = [];
                let compare = function (obj1, obj2) {
                    let val1 = obj1.占比.replace('%', '');
                    let val2 = obj2.占比.replace('%', '');
                    if (val1 < val2) {
                        return -1;
                    } else if (val1 > val2) {
                        return 1;
                    } else {
                        return 0;
                    }
                };
                let arrData = data.sort(compare); //数组对象从小到大排序，使用reverse()方法颠倒排序
                for (let i = 0; i < arrData.length; i++) {
                    if (arrData[i].占比 !== '0%') {
                        yAxisData.push(data[i].特征);
                        seriesData.push(data[i].占比.replace('%', ''));
                    }

                }
                yAxisData = yAxisData.reverse().slice(0,10).reverse();
                seriesData = seriesData.reverse().slice(0,10).reverse();
                let myChart = echarts.init(document.getElementById('tourist_statistics'));
                let option = {
                    tooltip: {
                        show: true,
                        formatter: "{b} <br> {c}%"

                    },
                    grid: {
                        left: 60,
                        top: 0,
                        bottom: 40,
                        x: 50
                    },
                    xAxis: [{
                        type: 'value',
                        axisTick: {
                            show: false,
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#EBEDF4'
                            }
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#747FA1',
                                fontSize: 12
                            }
                        },
                        splitLine: {
                            show: false,
                            color: '#EBEDF4'
                        }
                    }],
                    yAxis: [{
                        type: 'category',
                        // data: ['美食订单订单', '购物', '门票', '交通', '娱乐', '门票', '交通', '娱乐'],
                        data: yAxisData,
                        // minInterval: 1,
                        axisTick: {
                            // color:'#fff',
                            show: false,
                        },
                        axisLine: {
                            //  color:'#fff',
                            show: true,
                            lineStyle: {
                                color: '#EBEDF4'
                            }
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#747FA1',
                                fontSize: 12
                            },
                            interval: 0,
                            formatter: function(value) {
                                if ( value.length > 4) {
                                    if (value.length>9) {
                                        return `${value.substring(0, 4)}\n${value.substring(4, 7)}...`;
                                    } else {
                                        return `${value.substring(0, 4)}\n${value.substring(4, 9)}`;
                                    }
                                } else {
                                    return value;
                                }
                            }
                        }

                    }],
                    series: [{
                        name: '景点排行',
                        type: 'bar',
                        barWidth: 10,
                        label: {
                            normal: {
                                show: true,
                                position: 'right',
                                formatter: '{c}%',
                                textStyle: {
                                    color: '#747FA1',
                                    fontSize: '12'
                                }
                            }
                        },
                        data: []
                    }]
                };
                // 使用刚指定的配置项和数据显示图表。
                for (let j1 = 0; j1 < seriesData.length; j1++) {
                    option.series[0].data.push({
                        value: seriesData[j1],
                        name: yAxisData[j1],
                        itemStyle: {
                            normal: {
                                barBorderRadius: [0, 10, 10, 0],
                                color: {
                                    type: 'bar',
                                    colorStops: [{
                                        offset: 0,
                                        color: '#426CFF' // 0% 处的颜色
                                    }, {
                                        offset: 1,
                                        color: '#426CFF' // 100% 处的颜色
                                    }],
                                    globalCoord: false // 缺省为 false

                                }
                            }
                        }
                    });
                }
                myChart.setOption(option);
                let autoHeight = data.length * 8 + 50;
                myChart.getDom().style.height = autoHeight + "px";
                myChart.resize();
            }, // 客源地统计
            setSex(data) {
                // let data = [
                //     {'特征': '男性', '占比': '90%'},
                //     {'特征': '女性', '占比': '10%'},
                // ];
                let legendData = [];
                let seriesData = [];
                let array = data;
                for (let i = 0; i < array.length; i++) {
                    if (array[i].特征 == '男性') {
                        legendData.push(array[i].特征 + array[i].占比);
                        seriesData.push(array[i].占比.replace('%', ''));
                    } else if (array[i].特征 == '女性') {
                        legendData.push(array[i].特征 + array[i].占比);
                        seriesData.push(array[i].占比.replace('%', ''));
                    }

                }
                let myChart = echarts.init(document.getElementById('sex_consume'));
                let option = {
                    title: {
                        text: "男女比例",
                        textStyle: {
                            color: '#282C34',
                            fontSize: 13
                        },
                        bottom: '42%',
                        left: '21%'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b}"
                    },
                    legend: {
                        orient: 'vertical',
                        x: '65%',
                        itemWidth: 12,
                        itemHeight: 12,
                        data: legendData,
                        textStyle: {
                            color: '#747FA1',
                            fontSize: 12
                        }
                    },
                    series: [
                        {
                            name: '男女比例',
                            type: 'pie',
                            center: ['30%', '50%'],
                            radius: ['64%', '84%'],
                            avoidLabelOverlap: false,
                            labelLine: {
                                normal: {
                                    show: true
                                }
                            },
                            label: {
                                show: false
                            },
                            data: [
                                {
                                    value: seriesData[0],
                                    name: legendData[0],
                                    textStyle: {
                                        color: '#fff'
                                    },
                                    itemStyle: {
                                        normal: {
                                            color: '#2F7DFF'

                                        }
                                    }
                                }, {
                                    value: seriesData[1],
                                    name: legendData[1],
                                    textStyle: {
                                        color: '#fff'
                                    },
                                    itemStyle: {
                                        normal: {
                                            color: '#F15165'

                                        }
                                    }
                                }
                            ]
                        }
                    ]
                }
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            },  // 男女比例
            setAge(data) {
                let color = ['#2F7DFF', '#FFD25A', '#AD7EED', '#00D0CF', "#F15165", "#FF9454", "#27ff00"];
                let legendData = [];
                let nameData = [];
                let ageData = [];
                let array = data;
                for (let i = 0; i < array.length; i++) {
                        ageData.push(array[i].占比.replace('%', ''));
                        nameData.push(array[i].特征 + array[i].占比);
                        legendData.push(array[i].特征 + array[i].占比);
                }
                let myChart = echarts.init(document.getElementById('age_consume'));
                let option = {
                    title: {
                        text: "年龄分布",
                        textStyle: {
                            color: '#282C34',
                            fontSize: 13
                        },
                        bottom: '42%',
                        left: '21%'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b}"
                    },
                    legend: {
                        orient: 'vertical',
                        x: '65%',
                        itemWidth: 12,
                        itemHeight: 12,
                        data: legendData,
                        textStyle: {
                            color: '#747FA1',
                            fontSize: 12
                        }
                    },
                    series: [
                        {
                            name: '年龄分布',
                            type: 'pie',
                            center: ['30%', '50%'],
                            radius: ['64%', '84%'],
                            avoidLabelOverlap: false,
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            },
                            label: {
                                show: false
                            },
                            data: []
                        }
                    ]
                };
                for (let j = 0; j < legendData.length; j++) {
                    option.series[0].data.push(
                        {
                            value: ageData[j],
                            name: nameData[j],
                            textStyle: {
                                color: '#fff'
                            },
                            itemStyle: {
                                normal: {
                                    color: color[j]

                                }
                            }
                        }
                    );
                }

                myChart.setOption(option);

            },// 年龄分布
            setEducation(data) {
                // let data = [
                //     {'特征': '博士', '占比': '40%'},
                //     {'特征': '硕士', '占比': '10%'},
                //     {'特征': '本科', '占比': '10%'}
                // ];
                let color = ['#2F7DFF', '#FFD25A', '#AD7EED', '#00D0CF', "#F15165", "#FF9454", "#27ff00"];
                let legendData = [];
                let nameData = [];
                let ageData = [];
                let array = data;
                for (let i = 0; i < array.length; i++) {
                    ageData.push(array[i].占比.replace('%', ''));
                    nameData.push(array[i].特征 + array[i].占比);
                    legendData.push(array[i].特征 + array[i].占比);
                }
                let myChart = echarts.init(document.getElementById('edu_consume'));
                let option = {
                    title: {
                        text: "学历背景",
                        textStyle: {
                            color: '#282C34',
                            fontSize: 13
                        },
                        bottom: '42%',
                        left: '21%'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b}"
                    },
                    legend: {
                        orient: 'vertical',
                        x: '65%',
                        itemWidth: 12,
                        itemHeight: 12,
                        data: legendData,
                        textStyle: {
                            color: '#747FA1',
                            fontSize: 12
                        },
                    },
                    series: [
                        {
                            name: '学历背景',
                            type: 'pie',
                            center: ['30%', '50%'],
                            radius: ['64%', '84%'],
                            avoidLabelOverlap: false,
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            },
                            label: {
                                show: false
                            },
                            data: []
                        }
                    ]
                };
                for (let j = 0; j < legendData.length; j++) {
                    option.series[0].data.push(
                        {
                            value: ageData[j],
                            name: nameData[j],
                            textStyle: {
                                color: '#fff'
                            },
                            itemStyle: {
                                normal: {
                                    color: color[j]

                                }
                            }
                        }
                    );
                }

                myChart.setOption(option);

            },// 教育背景
            setZiJia(data) {
                let color = ['#2F7DFF', '#FFD25A', '#AD7EED', '#00D0CF', "#F15165", "#FF9454", "#27ff00"];
                let legendData = [];
                let seriesData = [];
                let nameData = [];
                let array = data;
                for (let i = 0; i < array.length; i++) {
                    // legendData.push(array[i].dvc_name);
                    nameData.push(array[i].dvc_name + array[i].countPercentage);
                    legendData.push(array[i].dvc_name + array[i].countPercentage);
                    seriesData.push(array[i].countPercentage.replace('%',''));
                }
                let myChart = echarts.init(document.getElementById('zi_jia_consume'));
                let option = {
                    title: {
                        text: "出行方式",
                        textStyle: {
                            color: '#282C34',
                            fontSize: 13
                        },
                        bottom: '42%',
                        left: '21%'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b}"
                    },
                    legend: {
                        orient: 'vertical',
                        x: '65%',
                        itemWidth: 12,
                        itemHeight: 12,
                        // data: ['自驾游', '团队游'],
                        data: legendData,
                        textStyle: {
                            color: '#747FA1',
                            fontSize: 12
                        },
                        formatter: function (name) {
                            return name;
                        }
                    },
                    series: [
                        {
                            name: '出行方式',
                            type: 'pie',
                            center: ['30%', '50%'],
                            radius: ['64%', '84%'],
                            avoidLabelOverlap: false,
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            },
                            label: {
                                show: false
                            },
                            data: []
                        }
                    ]
                };
                for (let j1 = 0; j1 < seriesData.length; j1++) {
                    option.series[0].data.push( {
                        value: seriesData[j1],
                        name: nameData[j1],
                        textStyle: {
                            color: '#fff'
                        },
                        itemStyle: {
                            normal: {
                                color: color[j1]
                            }
                        }
                    });
                }
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);

            }, // 出行方式
            setPhone(data) {
                let color = ['#2F7DFF', '#FFD25A', '#AD7EED', '#00D0CF', "#F15165", "#FF9454", "#27ff00"];
                let legendData = [];
                let seriesData = [];
                let nameData = [];
                let array = data;
                for (let i = 0; i < array.length; i++) {
                    // legendData.push(array[i].dvc_name);
                    nameData.push(array[i].type + array[i].countPercentage);
                    legendData.push(array[i].type + array[i].countPercentage);
                    seriesData.push(array[i].countPercentage.replace('%',''));
                }
                let myChart = echarts.init(document.getElementById('phone_consume'));
                let option = {
                    title: {
                        text: "手机品牌",
                        textStyle: {
                            color: '#282C34',
                            fontSize: 13
                        },
                        bottom: '42%',
                        left: '21%'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b}"
                    },
                    legend: {
                        orient: 'vertical',
                        x: '65%',
                        itemWidth: 12,
                        itemHeight: 12,
                        data: legendData,
                        textStyle: {
                            color: '#747FA1',
                            fontSize: 12
                        },
                        formatter: function (name) {
                            return name;
                        }
                    },
                    series: [
                        {
                            name: '手机品牌',
                            type: 'pie',
                            center: ['30%', '50%'],
                            radius: ['64%', '84%'],
                            avoidLabelOverlap: false,
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            },
                            label: {
                                show: false
                            },
                            data: []
                        }
                    ]
                };
                for (let j = 0; j < legendData.length; j++) {
                    option.series[0].data.push(
                        {
                            value: seriesData[j],
                            name: nameData[j],
                            textStyle: {
                                color: '#fff'
                            },
                            itemStyle: {
                                normal: {
                                    color: color[j]

                                }
                            }
                        }
                    );
                }
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            }// 手机品牌
        }
    }
</script>
<style scoped lang="less">
    .tourist_style {
        padding: 1.2rem 0 0.34rem;
    }

    .content_pian {
        width: 3.43rem;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0rem 0.08rem 0.4rem 0rem rgba(119, 136, 175, 0.2);
        border-radius: 0.08rem;
        margin: 0.2rem auto 0;
        padding-bottom: 0.2rem;
        .content_title {
            padding: 0.2rem 0 0.2rem 0.16rem;
            font-size: 0.15rem;
            font-weight: bold;
            color: rgba(40, 44, 52, 1);
            line-height: 0.16rem;
        }
        .consumption_level {
            display: flex;
            justify-content: space-around;
        }
        .consumption_biao {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            .name {
                font-size: 0.12rem;
                color: rgba(116, 127, 161, 1);
                line-height: 0.12rem;
                padding-top: 0.12rem;
            }
        }
        #tourist_statistics {
            width: 3.43rem;
        }
        #sex_consume,
        #age_consume,
        #zi_jia_consume,
        #edu_consume,
        #phone_consume {
            width: 3.43rem;
            height: 2.3rem;
            padding: 0.2rem 0;
        }
    }
</style>